<template>
  <el-row :gutter="40" class="panel-group">
    <p class="text-title" style="color:cornflowerblue;margin-top:-10px;margin-bottom:5px;">
      TEENPATTI:
      <el-tooltip effect="dark" content="更新汇总" placement="top-start">
        <span class="refresh" @click="refresh"><i class="el-icon-refresh"></i></span>
      </el-tooltip>
    </p>
    <div class="flexWrapStartEvenly teenpatti">
      <!-- 总局数： -->
      <el-col :xs="24" :sm="12" :md="6" class="card-panel-col">
        <div class="card-panel card-panel_one">
          总局数： 
          <div style="text-align: right;">
            <span class="text-value" >{{ teenpattiFormParams.today_total_game }} </span>局
          </div>
        </div>
      </el-col>
      <!-- 总下注 -->
      <el-col :xs="24" :sm="12" :md="6" class="card-panel-col">
        <div class="card-panel card-panel_two">
          总下注 
          <div style="text-align: right;">
            ₹<span class="text-value" >{{ teenpattiFormParams.today_total_bet }} </span>
          </div>
        </div>
      </el-col>
      <!-- 总输赢： -->
      <el-col :xs="24" :sm="12" :md="6" class="card-panel-col">
        <div class="card-panel card-panel_three">
          系统总输赢： 
          <div :class="teenpattiFormParams.today_total_income>0?'colorGre':'colorRed'" style="text-align: right;">
            ₹<span class="text-value" :class="teenpattiFormParams.today_total_income>0?'borderBomGre':'borderBomRed'">{{ teenpattiFormParams.today_total_income }} </span>
          </div>
        </div>
      </el-col>
      <!-- 总抽水 -->
      <el-col :xs="24" :sm="12" :md="6" class="card-panel-col">
        <div class="card-panel card-panel_four">
          总抽水： 
          <div style="text-align: right;">
            ₹<span class="text-value" >{{ teenpattiFormParams.today_total_tax }} </span>
          </div>
        </div>
      </el-col>
    </div>
    <p class="text-title" style="color:darksalmon;margin-top:-10px;margin-bottom:5px;">
      RUMMY:
      <el-tooltip effect="dark" content="更新汇总" placement="top-start">
        <span class="refresh" @click="refresh"><i class="el-icon-refresh"></i></span>
      </el-tooltip>
    </p>
    <div class="flexWrapStartEvenly rummy">
      <!-- 总局数： -->
      <el-col :xs="24" :sm="12" :md="6" class="card-panel-col">
        <div class="card-panel card-panel_one">
          总局数： 
          <div style="text-align: right;">
            <span class="text-value" >{{ rummyFormParams.today_total_game }} </span>局
          </div>
        </div>
      </el-col>
      <!-- 总下注 -->
      <el-col :xs="24" :sm="12" :md="6" class="card-panel-col">
        <div class="card-panel card-panel_two">
          总下注 
          <div style="text-align: right;">
            ₹<span class="text-value" >{{ rummyFormParams.today_total_bet }} </span>
          </div>
        </div>
      </el-col>
      <!-- 总输赢： -->
      <el-col :xs="24" :sm="12" :md="6" class="card-panel-col">
        <div class="card-panel card-panel_three">
          系统总输赢： 
          <div :class="rummyFormParams.today_total_income>0?'colorGre':'colorRed'" style="text-align: right;">
            ₹<span class="text-value" :class="rummyFormParams.today_total_income>0?'borderBomGre':'borderBomRed'">{{ rummyFormParams.today_total_income }} </span>
          </div>
        </div>
      </el-col>
      <!-- 总抽水 -->
      <el-col :xs="24" :sm="12" :md="6" class="card-panel-col">
        <div class="card-panel card-panel_four">
          总抽水： 
          <div style="text-align: right;">
            ₹<span class="text-value" >{{ rummyFormParams.today_total_tax }} </span>
          </div>
        </div>
      </el-col>
    </div>
  </el-row>
</template>

<script>
import {
  getGameSumReport
} from '@/api/statistics'
import {
  throttle
} from '@/utils/index'
export default {
  name: 'collect',
  components: {},
  data () {
    return {
      teenpattiFormParams:{
        today_total_game: 0, //当日总局数
        today_total_water: 0, //当日总下注
        today_total_income: 0, //当日总输赢
        today_total_tax: 0, //当日总抽水
      },
      rummyFormParams:{
        today_total_game: 0, //当日总局数
        today_total_water: 0, //当日总下注
        today_total_income: 0, //当日总输赢
        today_total_tax: 0, //当日总抽水
      }
    }
  },
  computed: {},
  created () {
    this.getDataList()
  },
  methods: {
    // 游戏汇总
    async getDataList (status) {
      let that = this, params = {};
      const response = await getGameSumReport(params)
      if (response.code == 1) {
        if(response.data.list){
          response.data.list.forEach(item=>{
            item.today_total_bet=that.$public.mathNumberDivideWan(item.today_total_bet)
            item.today_total_income=that.$public.mathNumberDivideWan(item.today_total_income)*-1
            item.today_total_tax=that.$public.mathNumberDivideWan(item.today_total_tax)
            if(item.game_id==1){
              that.teenpattiFormParams=item
            }else{
              that.rummyFormParams=item
            }
          })
          if(status){
            that.$message.success('数据已更新')
          }
        }
      }else{
        that.$message.error(response.msg)
      }
    },
    // 刷新
    refresh: throttle(function () {
      this.getDataList('success')
    }, 3000),
  }
}
</script>

<style lang="scss" scoped>
.panel-group {
  max-height: 40vh;
  .teenpatti{
    > div{
      font-size: 24px;
    }
    .card-panel_one {
      // background-color: cornflowerblue;
      background: url('../../../assets/img/teen_rummy/teen_game.png') no-repeat;
      background-size: 100% 100%;
    }
    .card-panel_two {
      background: url('../../../assets/img/teen_rummy/teen_water.png') no-repeat;
      background-size: 100% 100%;
    }
    .card-panel_three {
      background: url('../../../assets/img/teen_rummy/teen_income.png') no-repeat;
      background-size: 100% 100%;
    }
    .card-panel_four {
      background: url('../../../assets/img/teen_rummy/teen_tax.png') no-repeat;
      background-size: 100% 100%;
    }
  }
  .rummy{
    > div{
      font-size: 24px;
    }
    .card-panel_one {
      // background-color: darksalmon;
      background: url('../../../assets/img/teen_rummy/rummy_game.png') no-repeat;
      background-size: 100% 100%;
    }
    .card-panel_two {
      background: url('../../../assets/img/teen_rummy/rummy_water.png') no-repeat;
      background-size: 100% 100%;
    }
    .card-panel_three {
      background: url('../../../assets/img/teen_rummy/rummy_income.png') no-repeat;
      background-size: 100% 100%;
    }
    .card-panel_four {
      background: url('../../../assets/img/teen_rummy/rummy_tax.png') no-repeat;
      background-size: 100% 100%;
    }
  }
  .card-panel-col {
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    > div {
      width: 100%;
    }
  }
  
  .text-title{
    font-size: 28px;
    margin: 14px 20px;
  }
  .card-panel {
    cursor: pointer;
    overflow: hidden;
    color: #fff;
    padding:20px 30px;
    font-size: 18px;
    font-weight: 550;
    text-align: left;
    border-radius: 15px;
    &:hover {
      transition: all 0.3s ease-out;
      transform: scale(1.1);
    }
    .text-value {
      font-size: 28px;
      border-bottom: 1px solid #fff;
    }
    .borderBomRed{
      border-bottom: 2px solid red;
    }
    .borderBomGre{
      border-bottom: 2px solid green;
    }
  }
}

@media (max-width: 550px) {
  .panel-group .card-panel-col {
    margin-bottom: 5px;
  }
  .panel-group .card-panel {
    padding:30px;
  }
}
.refresh{
  font-size: 30px;
  font-weight: 600;
}
.refresh :hover{
  cursor: pointer;
  color: green;
  transition: all 0.3s ease-out;
  transform: scale(1.2);
}
</style>
